<template>
  <div id="mainportal" class="container" style="background-color: #fff;">
  
  
  
    <comhead :title="$store.getters.getMerchant.merchantName" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>
  
  
  
    <div class="iconImageFather">
  
      <mt-swipe :auto="4000" style="width:100%;">
  
        <mt-swipe-item v-for="item in $store.getters.getMerchant.classifyBanner.split(',')">
  
          <img :src='item' style='width:100%; height: 100%; ' />
  
        </mt-swipe-item>
  
  
  
      </mt-swipe>
  
    </div>
  
  
  
  
  
  
  
  
  
  
  
    <div class='head' :style="'border-left: 3px solid '+ $store.getters.getMerchant.themeColors">
  
      <div>
  
        车型信息
  
      </div>
  
      <div class='change' @click='existing' data-type='existing' :style="'background-color: '+ $store.getters.getMerchant.themeColors">
  
        <img src='../../image/31.png' style='width:15px;height:15px;margin:0 5px' />
  
        <span style='font-size:12px;'>切换车型</span>
  
      </div>
  
    </div>
  
  
  
    <div class='box_items'>
  
      <div class='box_left'>
  
        品牌
  
      </div>
  
      <div class='box_right'>
  
        {{carInfo.brandName}}
  
      </div>
  
    </div>
  
  
  
    <div class='box_items'>
  
      <div class='box_left'>
  
        车系
  
      </div>
  
      <div class='box_right'>
  
        {{carInfo.seriesName}}
  
      </div>
  
    </div>
  
  
  
    <div class='box_items'>
  
      <div class='box_left'>
  
        车型
  
      </div>
  
      <div class='box_right'>
  
        {{carInfo.modelName}}
  
      </div>
  
    </div>
  
  
  
    <div class='content' :style="'border-left: 3px solid '+ $store.getters.getMerchant.themeColors">
  
      选择产品类别
  
    </div>
  
    <!-- width:{{windowWidth/3-1}}px; -->
  
    <!-- data-main='{{item}}' -->
  
    <div>
  
      <div style='display:flex;align-items:center;width:100%;flex-wrap: wrap;'>
  
  
  
        <div v-for="(item,index) in categoryList" @click='productList(item)' style="border-bottom: solid 1px #e5e5e5;display:flex;align-items:center;justify-content: space-around ;box-sizing:border-box; " :style="(index+1)%3 === 0?'width:34%;':'width:33%; border-right: solid 1px #e5e5e5;'"
  
          :class="goodsCount[item.catId] === 0?'boright':''">
  
          <!-- filter:grayscale(100%); -->
  
          <div style='text-align:center;font-size:14px;padding: 10px;overflow:hidden;'>
  
            <div style="display:flex;justify-content: center;">
  
              <img :src='item.catIcon' class='icon_mar' :style="goodsCount[item.catId] === 0||goodsCount[item.catId] ===''||!goodsCount[item.catId] ?'  filter:grayscale(100%); opacity: 0.5;':''" />
  
            </div>
  
            <div style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;" :style="goodsCount[item.catId] === 0||goodsCount[item.catId] ===''||!goodsCount[item.catId] ?'color:#ccc':''">{{item.catName}}</div>
  
          </div>
  
        </div>
  
      </div>
  
    </div>
  
  
  
  
  
  
  
  
  
  
  
  </div>
</template>

 
 

<script>
import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";

import { Indicator } from "mint-ui";

import { Tabbar, TabItem } from "mint-ui";

import { TabContainer, TabContainerItem } from "mint-ui";

import comhead from "../../common/coffee/Comhead";

export default {
  data() {
    return {
      classifyBanner: "",

      categoryList: [],

      carId: "",

      carInfo: [],

      defaultCarId: "",

      // windowWidth: 375,

      goodsCount: []
    };
  },

  computed: {},

  methods: {
    existing() {
      this.$router.replace({
        name: "filtercar",

        query: {
          carId: this.carId
        }
      });

      // wx.redirectTo({

      //   url: "../filter_type/filter_type?carId=" + this.carId,

      //   success: function(res) {},

      //   fail: function(res) {},

      //   complete: function(res) {}

      // });
    },

    getCarInfo() {
      let self = this;

      let url = this.$baseUrl.sizUrl + "/bsm";

      let data = {
        merchantId: this.$store.getters.getMerchant.merchantId,

        modelId: this.carId
      };

      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");

          return;
        }

        if (res.status != 200) {
          console.log("请求数据错误");

          return;
        }

        if (res.status === 200) {
          console.log("车信息", res.data.data);

          this.carInfo = res.data.data;
        }
      };

      this.$reqFormPost(url, data, callBack);
    },

    getNameByUserId() {
      let stroge = window.localStorage;

      console.log("默认首选车型ID", stroge.carId);

      if (stroge.carId) {
        console.log(111);

        this.carId = stroge.carId;

        this.getCarInfo();

        this.getCategoryList();

        return;
      } else {
        this.getCategoryList();
      }

      let self = this;

      let url = this.$baseUrl.bizUrl + "/supplier/info/byuser";

      let data = {
        token: this.$store.getters.getLoginStatus.token,

        userId: this.$store.getters.getLoginStatus.userId
      };

      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误1！");

          return;
        }

        if (res.data.status != 200) {
          console.log("请求数据错误1");

          return;
        }

        if (res.data.status == 200) {
          self.carId = res.data.data.defaultCarId;

          if (self.carId) {
            self.getCarInfo();
          }

          self.getCategoryList();
        }
      };

      this.$reqFormPost(url, data, callBack);
    },

    getCategoryList() {
      let self = this;

      let url = this.$baseUrl.sizUrl + "/merchant/catlist";

      let data = {
        merchantId: this.$store.getters.getMerchant.merchantId,

        modelId: this.carId
      };

      //发起网络请求

      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");

          return;
        }

        if (res.status != 200) {
          console.log("请求数据错误");

          MessageBox.alert("网络加载失败, 请检查您的网络");

          return;
        }

        if (res.status === 200) {
          console.log("分类", res);

          (this.categoryList = res.data.data.children),
            (this.goodsCount = res.data.data.goodsCount);
        }
      };

      this.$reqFormPost(url, data, callBack);
    },

    productList(e) {
      let self = this;
			this.icon = e.pic
      if (
        this.goodsCount[e.catId] === 0 ||
        this.goodsCount[e.catId] === "" ||
        !this.goodsCount[e.catId]
      ) {
        return;
      }

      console.log("商品数量", this.goodsCount[e.catId]);

      if (this.goodsCount[e.catId] === 1) {
        // this.$router.push(
        //   "/productdetail?id=PD5a530fe9db573c1ed8ae87b2&carId=" + this.carId
        // );

        console.log("开始确认请求");

        let catId = "";

        let secCatId = "";

        if (e.levelNum === 1) {
          catId = e.catId;
        } else {
          catId = e.parentId;

          secCatId = e.catId;
        }

        let url = this.$baseUrl.bizUrl + "/goods/front/list";

        let data = {};

        if (!this.$store.getters.getLoginStatus.userId) {
          data = {
            merchantId: this.$store.getters.getMerchant.merchantId,

            firstCatId: catId, //一级分类id

            secCatIds: secCatId, //二级分类id

            carId: this.carId
          };
        } else {
          data = {
            merchantId: this.$store.getters.getMerchant.merchantId,

            userId: this.$store.getters.getLoginStatus.userId,

            firstCatId: catId, //一级分类id

            secCatIds: secCatId, //二级分类id

            carId: this.carId
          };
        }

        //发起网络请求

        let callBack = res => {
          if (res == null) {
            console.log("网络请求错误！");

            return;
          }

          if (res.status != 200) {
            console.log("请求数据错误");

            return;
          }

          if (res.status === 200) {
            console.log("商品列表", res);
						if(this.$store.getters.getMerchant.merchantId == 'Mer5b42c004db573c56a0d4d643') {
							this.$router.push(
	              "/liDetail?id=" +
	                res.data.data[0].goodsId +
	                "&carId=" +
	                this.carId+
	                "&icon="+this.carInfo.icon
	            );
	            return
						}
            this.$router.push(
              "/productdetail?id=" +
                res.data.data[0].goodsId +
                "&carId=" +
                this.carId+
                "&icon="+this.carInfo.icon
            );

            // this.$router.push(
            //   "productdetail?id=PD5a530fe9db573c1ed8ae87b2&carId=" +
            //     this.carId
            // );

            // url: '../product_datil/product_datil?id=' + res.data.data[0].goodsId + '&carId=' + this.carId,

            // 去商品详情
          }
        };

        this.$reqFormPost(url, data, callBack);

        return;
      }
			
      let url =
        "/productlist?id=" +
        this.carId +
        "&levelNum=" +
        e.levelNum +
        "&catname=" +
        e.label+"&icon="+this.carInfo.icon;

      if (e.levelNum === 1) {
        url = url + "&catid=" + e.catId;
      } else {
        url = url + "&catid=" + e.parentId + "&secCatId=" + e.catId;
      }

      // wx.navigateTo({

      //   url: url,

      //   success: function(res) {},

      //   fail: function(res) {},

      //   complete: function(res) {}

      // });

      this.$router.push(url);
    },

    goSign() {
      this.$router.push({
        name: "sign"
      });
    },

    foBack() {
      this.$router.go(-1);
    }
  },

  mounted() {
    document.title = this.$store.getters.getMerchant.merchantName;

    this.getNameByUserId();
  },

  components: {
    Tabbar,

    TabItem,

    TabContainer,

    TabContainerItem,

    comhead,

    Swipe,

    SwipeItem
  }
};
</script>
<style>
.iconImageFather {
  height: 37vh;

  display: flex;

  align-items: flex-start;

  overflow: hidden;
}

.blueBlock {
  background-color: #1973bf;

  height: 1em;

  width: 3px;
}

.noCar {
  padding: 10px;

  margin: 10px;

  border: 1px solid #e5e5e5;

  border-radius: 8px;

  color: #1973bf;
}

.change {
  margin: 5px 10px;

  display: flex;

  align-items: center;

  color: #fff;

  font-size: 14px;

  border-radius: 5px;

  padding: 2px 5px 2px 0;
}

.box_items {
  padding: 0;

  font-size: 14px;

  border-bottom: solid 1px #e5e5e5;

  display: flex;
}

.box_left {
  border-right: solid 1px #e5e5e5;

  padding: 5px 10px;

  width: 6em;
}

.box_right {
  padding: 5px 10px;

  flex: 1;
}

.head {
  border-bottom: 1px #e5e5e5 solid;

  display: flex;

  font-size: 14px;

  align-items: center;

  justify-content: space-between;

  background-color: #f5f5f5;

  padding-left: 10px;
}

.car_type {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  box-sizing: border-box;
}

.content {
  border-bottom: 1px #e5e5e5 solid;

  background-color: #f5f5f5;

  display: flex;

  align-items: center;

  padding: 5px 10px;

  /* color: #fff; */

  font-size: 14px;
}

.direction_height {
  width: 1px;

  height: 80px;

  background-color: #e5e5e5;
}

.direction_width {
  height: 1px;

  width: 210px;

  background-color: #e5e5e5;
}

.type_box {
  display: flex;

  justify-content: center;

  align-items: center;
}

.boright {
  background-color: #f2f2f2;
}

.icon_mar {
  width: 50px;

  height: 50px;
}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
